<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组合选择器-后代选择器</title>
    <style type="text/css">
        div h1{
            color:green;
            font-size: 30px;
        }
        /*后代选择器 div的子代p和孙代p都会被控制  美人鱼和港囧都会被控制*/
        div p{
            color:silver;
            font-size:20px;
        }
        /*小结
            1、如果我们的后代选择器的某个元素需要特别的样式
            则可以以下面的形式来完成
            2、标签选择器优先级低于类选择器
            3、我们使用后代选择器，尽量使用标签选择器或类选择器
        */
        div p.te1{
            color:orangered;
        }
    </style>
</head>
<body>
<div>
    <h1>笑傲江湖</h1>
    <p>美人鱼</p>
    <span>
        hello!
        <p>港囧</p>
        <span><p class="te1">金刚</p></span>
    </span>
</div>
</body>
</html>